<script setup>
import {ref} from 'vue'
const props = defineProps({
  curIndex: {
    type: Number,
    default: 0
  }
})
// const selectedIconPath = ref('selectedIconPath')
const list =[
  {
    "pagePath": "/teacher/demo/count",
    "iconPath": "/static/image/ness1.png",
    "selectedIconPath": "/static/image/ness1_selected.png",
    "text": "填报统计"
  },
  {
    "pagePath": "/teacher/demo/demo",
    "iconPath": "/static/image/ness2.png",
    "selectedIconPath": "/static/image/ness2_selected.png",
    "text": "返乡审批"
  },
  {
    "pagePath": "/teacher/demo/backSchool",
    "iconPath": "/static/image/ness3.png",
    "selectedIconPath": "/static/image/ness3_selected.png",
    "text": "返校审批"
  },
  {
    /* 最前面加/的目的为从根目录里开始找 */
    "pagePath": "/teacher/demo/register",
    "iconPath": "/static/image/ness4.png",
    "selectedIconPath": "/static/image/ness4_selected.png",
    "text": "到校注册"
  },
  {
    "pagePath": "/teacher/demo/people",
    "iconPath": "/static/image/ness5.png",
    "selectedIconPath": "/static/image/ness5_selected.png",
    "text": "个人中心"
  }
]
const toTabbar = (path) => {
  uni.navigateTo({
    url: path
  })
}
</script>

<template>
  <view class="dhl">
    <view v-for="(item,index) in list" :key="index" @click="toTabbar(item.pagePath)">
<!--      放图片-->
     <view style="text-align: center">
       <image v-if="index !== props.curIndex" class="img1" :src="item.iconPath" ></image>
       <image v-else class="img1" :src="item.selectedIconPath" ></image>
     </view>
<!--      放文字-->
      <view>
        <text>{{item.text}}</text>
      </view>
    </view>
  </view>
</template>

<style scoped>
/*定义导航栏*/
.dhl{
  height:60px;
  width:100%;
  display:flex;
  justify-content:space-around;
  background-color: #fff;
  color: black;
  font-size: 15px;
  font-weight:  bold;
  position: fixed;
  bottom: 0px;
}
/*定义图标*/
.img1{
  width: 30px;
  height: 30px;
}
</style>